<template>
  <div>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" to="Home">主页</van-tabbar-item>
      <van-tabbar-item icon="friends-o" :badge="goodsNum" to="shopCart">购物车</van-tabbar-item>
      <van-tabbar-item icon="setting-o" @click="loginOut">退出</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script lang="ts">
import { useStore } from 'vuex';
import {computed, defineComponent, getCurrentInstance, ref} from 'vue';
export default defineComponent({
  name: 'HomeBottom',
  setup() {
    const store = useStore()
    const {proxy}: any = getCurrentInstance()
    let active = ref(0)
    const goodsNum = ref(
      computed(() => {
        return store.getters.getGoodsNum
      })
    )
    function loginOut() {
      proxy.$router.push('/login')
      window.sessionStorage.removeItem('token')
    }
    return {
      active,
      goodsNum,
      loginOut
    }
  }
})
</script>
<style scoped>
</style>